<template>
  <div
    class="header-container"
  >
    <div class="container-head flex">
      <div class="head-logo" style="-webkit-app-region: drag"></div>
      <div style="flex: 1; height: 46px; -webkit-app-region: drag"></div>
      <div class="head-right flex">
        <div class="user-info flex">
          <div class="user-header"></div>
          <p style="font-size:12px;margin-right:5px">
              <span>会员状态：</span>
              <span :style="'color:'+vipClassList[vipClass].color">{{vipClassList[vipClass].label}}</span>
            </p>
          <el-dropdown class="cursor">
            <p style="font-size:12px;margin-right:5px">
              <span style="color: white">账户：</span>
              <span class="el-dropdown-link" style="color: #b7b7b7">
              {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            </p>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>余额：{{ paybacksSum }}元</el-dropdown-item>
              <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- <div class="user-info flex">
          <div class="user-header"></div>
          <div class="user-name flex cursor">
            <div>{{ username }}</div>
            <div class="right-down"></div>
            <div class="user-more cursor flex">退出</div>
          </div>
        </div> -->
        <div class="window-min cursor" @click="winMin"></div>
        <div class="window-close cursor" @click="winClose"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {getInviteInfo, loginOut} from "../../utils/api";
import {getProxyConfig, writeConfigToPath} from "../../utils/fileUtils";
const { exec,spawn } = require('child_process');
import bus from '../../utils/bus'
export default {
  name: "header-container",
  data() {
    return {
      username: "162624626@qq.com",
      paybacksSum: 0,
      vipClass: 0 ,//会员状态 0:暂未开通 1:普通会员 2:高级会员
      vipClassList:[
        {
          label:'暂未开通',
          color:'red'
        },
        {
          label:'普通会员',
          color:'white'
        },
        {
          label:'高级会员',
          color:'green'
        }
      ]
    };
  },
  methods: {
    winMin() {
      this.$electron.ipcRenderer.send("window-min");
    },
    winClose() {
      this.$electron.ipcRenderer.send("window-close");
    },
    loginOut(){
      loginOut().then(res => {
        if(res.data && res.data.ret == 1){
          //退出清空所有缓存信息
          this.$localStore.set("access_token",null)
          this.$localStore.set("currentNode",null)
          this.$localStore.set("isStart",false)
          this.$localStore.set("userInfo",'')
          this.$localStore.set("isExpire",null)
          this.$localStore.set("apiurl_list",null)
          this.$store.commit('CHANGE_ISSART',false)
          this.$localStore.set('nodeList',null)
          this.$localStore.set('isFirst',null)
          this.clearProxyConfig()
          this.$router.push({
            path:'/login'
          })
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    //清空代理配置
    clearProxyConfig(){
      let text = getProxyConfig(false)
      let configUrl = writeConfigToPath(text,"off.bat")
      exec(configUrl,{cwd:'C:/'}, (error, stdout, stderr) => {
        if (error) {
          console.error(`执行的错误: ${JSON.stringify(error)}`)
        }
      })
    },
    handleVipStatus(){
      let userInfo = this.$localStore.get("userInfo");
      if(userInfo){
        this.vipClass =  this.$localStore.get("userInfo").vip_class;
      }
    }
  },
  mounted() {
    this.username = this.$localStore.get("email")
    this.handleVipStatus()
    bus.$on('updateVip',()=>{
      this.handleVipStatus()
      const yue = this.$localStore.get("userInfo").money
      this.paybacksSum = Number(yue).toFixed(2)
    })
    //退出软件
      this.$electron.ipcRenderer.on("quit-app", ()=>{
        this.clearProxyConfig()
        setTimeout(()=>{
          this.$electron.ipcRenderer.send("quitApp");
        },1000)
      });
  }
};
</script>

<style>
/* 顶部导航条样式 */
.container-head {
  width: 100%;
  height: 46px;
  padding: 0 15px;
  justify-content: space-between !important;
  background: #24262f;
}
.head-logo {
  width: 120px;
  height: 32px;
  background: url("../../assets/logo.png") left top no-repeat;
  background-size: 100%;
}
.head-right {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b7b7b7;
}
.user-header {
  width: 30px;
  height: 30px;
  background: url("../../assets/user-head.png") left top no-repeat;
  background-size: 100%;
  margin-right: 10px;
}
.user-name {
  position: relative;
}
.user-name:hover .user-more {
  display: block;
}
.user-more:hover {
  display: block;
}
.user-more {
  display: block;
  position: absolute;
  left: 0;
  bottom: -46px;
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: #24262f;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b7b7b7;
}
.right-down {
  width: 14px;
  height: 14px;
  background: url("../../assets/down.png") left top no-repeat;
  background-size: 100%;
  margin-left: 5px;
}
.window-min {
  width: 14px;
  height: 14px;
  background: url("../../assets/min.png") left top no-repeat;
  background-size: 100%;
  margin-right: 24px;
  margin-left: 44px;
}
.window-close {
  width: 14px;
  height: 14px;
  background: url("../../assets/close.png") left top no-repeat;
  background-size: 100%;
}
</style>